<template>
  <div class="snow-page">
    <div class="snow-inner">
      <a-form ref="formRef" auto-label-width :model="formData.form">
        <a-row :gutter="16">
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
            <a-form-item field="name" label="乡镇">
              <a-select v-model="formData.form.name" placeholder="请选择乡镇" allow-clear allow-search>
                <a-option v-for="item in optionsList" :key="item.id" :label="item.name" :value="item.id">
                </a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
            <a-form-item field="level" label="管理级别">

              <a-select v-model="formData.form.level" placeholder="请选择管理级别" allow-clear allow-search>
                <a-option label="重点管理" value="1">
                </a-option>
                <a-option label="简化管理" value="2">
                </a-option>
                <a-option label="登记管理" value="3">
                </a-option>
              </a-select>

            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
            <a-space class="search-btn">
              <a-button type="primary" @click="getCommonTableList">
                <template #icon>
                  <icon-search />
                </template>
                <template #default>查询</template>
              </a-button>
              <a-button @click="onReset">
                <template #icon>
                  <icon-refresh />
                </template>
                <template #default>重置</template>
              </a-button>

            </a-space>
          </a-col>
        </a-row>

      </a-form>
      <a-table row-key="key" size="small" :bordered="{
        cell: true
      }" :scroll="{ x: '100%', y: '100%', minWidth: 1000 }" :loading="loading" :columns="columns" :data="tableData"
        :row-selection="rowSelection" v-model:selectedKeys="selectedKeys" :pagination="pagination"
        @page-change="pageChange" @page-size-change="pageSizeChange">

        
        <template #fuben>
          <a-space>
            <a href="javaScript:void(0)" style="text-decoration: none;" >预览</a>
          </a-space>
        </template>
        <template #optional>
          <a-space>
            <a-button size="mini" type="primary">详情</a-button>
            <a-button size="mini">修改</a-button>
            <a-popconfirm content="确定删除这条数据吗?" type="warning">
              <a-button size="mini" type="primary" status="danger">删除</a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getCommTownsAPI } from "@/api/modules/commTowns/index";
import { getsourcePdpTownsList } from "@/api/modules/sourcePdp/index";
import { getCommonTableListAPI } from "@/api/modules/table/index";
import { List, FormData, RowSelection, Pagination } from "./config";
const formData = reactive({
  form: {
    name: "",
    phone: "",
    email: "",
    address: "",
    level: "",
    status: null
  },
  search: false
});
const optionsList = ref([]) as any
const selectedKeys = ref<string[]>([]);
const rowSelection = reactive<RowSelection>({
  type: "checkbox",
  showCheckedAll: true,
  onlyCurrent: false
});
const pagination = ref<Pagination>({ showPageSize: true, showTotal: true, current: 1, pageSize: 10, total: 10 });
const pageChange = (page: number) => {
  pagination.value.current = page;
};
const pageSizeChange = (pageSize: number) => {
  pagination.value.pageSize = pageSize;
};
const columns = [
  {
    title: "序号",
    width: 70,
    render: ({ rowIndex }: { rowIndex: number })  => {
      return rowIndex + 1
    }
  },
  {
    title: "许可证编码",
    dataIndex: "code",
    width:220
  },
  {
    title: "排污单位名称",
    dataIndex: "sourcePollutantIdDictMap.name",
    width:220,
    align: "center"
  },
  {
    title: "所属乡镇",
    dataIndex: "townshipCodeDictMap.name",
    width: 120
  },
  {
    title: "行业类型",
    dataIndex: "needRectified"
  },
  {
    title: "管理级别",
    dataIndex: "dischargeLevelCode"
  },
  {
    title: "发证日期",
    dataIndex: "isuueDate",
    align: "center",
    
  },
  {
    title: "有效期限",
    dataIndex: "expiryDate"
  },
  {
    title: "状态",
    dataIndex: "status"
  },
  {
    title: "排污许可副本",
    dataIndex: "fuben",
    slotName: "fuben",
    width:120
  },

  // {
  //   title: "操作",
  //   slotName: "optional",
  //   align: "center",
  //   fixed: "right",
  //   width: "200"
  // }
];
const formRef = ref();
const onReset = () => {
  formRef.value.resetFields();
  getCommonTableList();
};
onMounted(() => {
  intiData()
})



async function intiData() {
  let res = await getCommTownsAPI() as any
  if (res.success) {
    optionsList.value = res.data
  }
}
const loading = ref<boolean>(false);
const tableData = ref<List[]>([]);
const getCommonTableList = async () => {
  let obj = {
    "sourcePdpDtoFilter": {
      "townshipCode": formData.form.name,
      dischargeLevelCode: formData.form.level
    },
    "orderParam": null,
    "pageParam": {
      "pageNum": pagination.value.current,
      "pageSize": pagination.value.pageSize,
      "count": true
    }
  }
  try {
    loading.value = true;

    let res = await getsourcePdpTownsList(obj) as any
    tableData.value = res.data.dataList
    pagination.value.total = res.data.totalCount;
  } finally {
    loading.value = false;
  }
};
getCommonTableList();
</script>

<style lang="scss" scoped>
.search-btn {
  margin-bottom: 20px;
}
</style>
